<!DOCTYPE html>
<label>{{ 'UPGRADES.HIDE' | translate }}:
   <input type="checkbox" ng-model="ct.state.player.options.hideBought">
</label>
{{ 'UPGRADES.SORT' | translate }} <select name="sort" ng-model="ct.state.player.options.sortIndex">
  <option value="0">{{ 'UPGRADES.NAME' | translate }}</option>
  <option value="1">{{ 'UPGRADES.PRICE' | translate }}</option>
</select>
<div>
  <h2>{{ 'UPGRADES.GLOBAL' | translate }}</h2>
  <div class="row">
    <div ng-repeat="key in ct.visibleGlobalUpgrades()"
         ng-click="ct.upgradeService.buyGlobalUpgrade(key, ct.state.player)"
         class="col-xs-12 btn btn-default"
         ng-class="{disabled: !ct.upgradeService.canBuyGlobalUpgrade(key, ct.state.player)}">
      <span class="pull-left">
    {{ 'UPGRADES.LEVEL' | translate }}: {{ct.state.player.global_upgrades[key]}} {{ct.data.global_upgrades[key].name}}: {{ct.data.global_upgrades[key].description}}
  </span>
  <span class="pull-right"
          ng-repeat="(resource, price) in ct.data.global_upgrades[key].price">
    <pretty value="price*ct.upgradeService.priceMultiplier(key, ct.state.player)"></pretty> &nbsp;
    <get-html value="resource"></get-html>
  </span>
  </div>
</div>
<div ng-repeat="slot in ct.state.player.element_slots track by $index">
  <element-select index="$index"
                  ng-if="!slot"></element-select>
  <div ng-if="slot">
    <h2>{{ct.data.elements[slot.element].name}}</h2>
    <button class="btn btn-default"
            ng-click="ct.upgradeService.buyAll(ct.state.player, slot.upgrades, ct.visibleUpgrades(slot, ct.state.player), ct.data.upgrades, ct.data.elements[slot.element].main)">{{ 'UPGRADES.BUY_ALL' | translate }}</button>
    <div class="row">
      <div ng-repeat="up in ct.visibleUpgrades(slot, ct.state.player)"
           ng-click="ct.buyUpgrade(up, slot, ct.state.player)"
           class="col-xs-12 btn btn-default"
           ng-class="{disabled: ct.data.upgrades[up].price > ct.state.player.resources[ct.data.elements[slot.element].main] &&
         !slot.upgrades[up],
         active: slot.upgrades[up]}">
        <span class="pull-left">
        {{ct.data.upgrades[up].name}}: {{ct.data.upgrades[up].description}}
      </span>
        <span class="pull-right">
        <pretty value="ct.data.upgrades[up].price"></pretty> &nbsp;
        <get-html value="ct.data.elements[slot.element].main"></get-html>
      </span>
      </div>
    </div>
  </div>
</div>
